
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/jquery.shuffleText.js"></script>
        <script type="text/javascript">
        
        $(document).ready(function(){
            
            //获取所有用户名单
            $.ajax({
                type: "POST",
                url: "get_all_info.php",
                cache: false,
                success: function(data){
                    $("#info").text(data);
                }
            })
            //获取奖的总数
            $.ajax({
                type: "POST",
                url: "get_sum.php",
                cache: false,
                success: function(data){
                    $("#sum").text(data);
                    // alert($("#sum").text());
                }
            })

            //获取各种奖项名称
            $.ajax({
                type: "POST",
                url: "get_j.php",
                dataType: "json",
                cache: false,
                success: function(data){
                    // console.log(data);
                    for(var i = 0; i < data.length; i++){
                        var text = '<button style="margin:5px"class="btn btn-primary btn-lg" type="button">'+data[i].wx_lottery_name+' <span class="badge">'+data[i].wx_lottery_num+'</span></button>'
                        $("#jx").append(text);
                    }
                    $("#jx").append("<br>");
                }
            })


            var target = $('blockquote');
            rand = -1;
            $('#start').click(function(e){
                $('#start').attr('disabled', '"disabled"');
                a = setInterval(get_rand_num, 100);
                // get_rand_num(e);
            })

            $("#end").click(function(e){
                $('#end').attr('disabled', '"disabled"');
                $('#list').removeAttr('disabled');
                $('blockquote').remove();
                clearInterval(a);
                $.ajax({
                    type: "POST",
                    url: "get_xyclient.php",
                    dataType: "json",
                    cache: false,
                    data: {
                        sum: $("#sum").text()
                    },
                    success: function(data){
                        for(var i = 0; i < data.length; i++){
                            $("#xyclient").append(data[i].name+'<br>');
                        }
                    }
                })
                alert("幸运顾客已经产生，请按“获取中奖名单”！");
            })

            function get_rand_num(e){

                c = jQuery.parseJSON($("#info").text());
                var length = c.length;
                var random = Math.floor(length*Math.random());
                if(rand != random){
                    // console.log(random);
                    $("#entry").val(c[random].wx_wall_name);
                    var target  = $('blockquote');
                    target.shuffleText($('#entry').val());
                    rand = random;
                }
            }
        })
        </script>
        <style type="text/css">
        .se{
            position: absolute;
            top: 400px;
            left: 50%;
            height: 300px;
            width: 600px;
            margin-left: -300px;
        }

        .xyclient{
            margin: 10px;
            font-size: 50px;
            color: #ff6860;
            font-family: 微软雅黑;
            line-height: 60px;
            font-weight: bolder;
        }
        </style>
      
    </head>
<body>
<div class="inner">
    <input type="hidden" id="entry" />
    <textarea id="info" style="display:none"></textarea>
    <textarea id="sum" style="display:none"></textarea> 
    <br>
    <blockquote>准备抽奖</blockquote><br>
    <div class="se">
        <button type="button" class="btn btn-primary btn-lg" id="start">开始抽奖</button>
        <button type="button" class="btn btn-warning btn-lg" id="end">停止抽奖</button>
        <button type="button" class="btn btn-success btn-lg" id="list" disabled="disabled" data-toggle="modal" data-target="#getlist">获取中奖名单</button>
    </div>
</div>

    <!-- 模拟框开始 -->
    <div class="modal fade" id="getlist" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel" style="text-align:left">获奖名单</h4>
                </div>
                <div class="modal-body" style="text-align:left;height:500px">
                <div id="jx"></div>
                <!-- 名单开始 -->
                <div class="xyclient" id="xyclient">
                    
                </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">发送微信消息</button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>